<template>
  <div class="absolute z-100 overflow-hidden" :style="{
    top: cfg.style.top,
    left: cfg.style.left.replace('px', '') - cfg.style.width.replace('px', '') * 0.5 + 'px',
    width: cfg.style.width.replace('px', '') * (coefficient + 0.1) - nextRight + 20 + 'px',
  }">
    <Swiper class="x-center-swiper"
      :autoplay="cfg.autoplay === 'true' ? { delay: (cfg.delay * 1000) || 3000, disableOnInteraction: false } : false"
      :centered-slides="false" :slides-per-view="(coefficient + 0.1)" :watch-slides-progress="true" :loop="true"
      :looped-slides="cfg.data.length" :style="{
        width: cfg.style.width.replace('px', '') * (coefficient + 0.1) + 'px',
      }" :modules="[Navigation]" :navigation="{
  nextEl: '.next',
  prevEl: '.prev',
}" :pagination="{
  bulletClass: 'swiper-pagination-bullet my-bullet',
  bulletActiveClass: 'swiper-pagination-bullet-active my-bullet-active',
  clickable: true
}" @progress="onProgress" @set-transition="onSetTransition" @init="onInit" @pagination-render="onPaginationRender">
      <swiper-slide v-for="x, i in cfg.data" :key="x.id" class="x-center-swiper-item"
        :style="{ padding: cfg['border_width'] || '10px' }">
        <div v-if="x.title" class="swiper-item-title text-center relative text-[#244965] z-10 mb-5px">
          {{ x.title }}
        </div>
        <swiper-child-item :data="x" :real-index="i" :axis-id="cfg.axis_id" :swiper="swiperExp" :style="{
          width: cfg.style.width,
        }" />
      </swiper-slide>

    </Swiper>
    <div v-if="cfg?.skip" class="skip z-1012 text-12px px-13px cursor-pointer py-4px absolute bottom-10px"
      :style="{ right: 0 + 'px' }" @click="onSkipClick">
      {{ ttsa.is_return_peek && cfg?.skip['label-again'] ? cfg?.skip['label-again'] : cfg?.skip.label || '跳过' }}
    </div>
    <div class="x-swiper-op next flc z-120" :style="{ right: 0 + 'px' }">
      <svg-icon name="subtitle-arrow" class="w-3/5 rotate-180 transform" />
    </div>
  </div>
</template>
<script lang="ts" setup name="SwiperCenter">
import { Navigation } from "swiper";
import { useUIStore } from '@/store/ui';
import { useTtsaStore } from "@/store/ttsa";

const ttsa = useTtsaStore()
const uiStore = useUIStore()
const props = defineProps({
  cfg: {
    type: Object,
    default: () => ({}),
  },
});
const swiperExp = ref(null)
const nextRight = ref(-50)

const onInit = (swiper) => {
  swiperExp.value = swiper
  setTimeout(() => {
    const lastSwiper = swiper.slides[swiper.activeIndex + 2]
    const { right: sr } = swiper.$el[0].getBoundingClientRect()
    const { right: lr } = lastSwiper.getBoundingClientRect()
    nextRight.value = sr - lr - 60
  }, 10)

}

const onPaginationRender = (swiper) => {
  swiper.pagination.bullets.forEach(pDom => {
    pDom.onmouseover = function () {
      this.click();
    };
  });
}

const width = computed(() => Number(props.cfg.style.width.replace('px', '')));

const coefficient = computed(() => Number(props.cfg.coefficient) || 1.3)

const onProgress = (swiper) => {
  for (let i = 0; i < swiper.slides.length; i++) {
    const slide = swiper.slides.eq(i);
    const slideProgress = swiper.slides[i].progress;
    const translate = (slideProgress * (width.value / coefficient.value) + 20) + "px";
    const scale = 1 - Math.abs(slideProgress) / 6;
    const zIndex = 100 - Math.abs(Math.round(10 * slideProgress));
    slide.transform("translateX(" + translate + ") scale(" + scale + ")");
    slide.css("zIndex", zIndex);
    const slidIndex = Math.abs(Math.round(slideProgress))

    let opacity = 1
    if (slidIndex === 0) {
      opacity = 1
    } else if (slidIndex === 1) {
      opacity = 0.85
    } else if (slidIndex === 2) {
      opacity = 0.6
    } else {
      opacity = 0
    }
    slide.css('opacity', opacity)

    if (slideProgress > 0.5) {
      slide.css("opacity", 0);
    }
  }
};

const onSetTransition = (swiper, transition) => {
  for (var i = 0; i < swiper.slides.length; i++) {
    var slide = swiper.slides.eq(i);
    slide.transition(transition);
  }
};

const onSkipClick = () => {
  if (!props.cfg?.skip || !props.cfg?.skip.event_click) return
  uiStore.go(props.cfg?.skip.event_click)
}
</script>

<style scoped lang="scss">
.x-center-swiper {
  @apply overflow-hidden left-0 z-100 pb-30px;
  top: 35%;
  width: 100vw;

  :deep() {
    .x-center-swiper-item {
      @apply backdrop-filter backdrop-blur-6px;
      transition-duration: 300ms;
      padding: 10px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.8);
      background: linear-gradient(180deg, rgba(227, 242, 255, 0.44) 0%, rgba(205, 234, 255, 0.39) 100%);
      border-radius: 24px;
    }
  }
}

.x-swiper-op {
  @apply absolute rounded-10px backdrop-blur-10px backdrop-filter cursor-pointer;
  height: 52px;
  width: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(215, 228, 255, 0.49) 0%, rgba(215, 228, 255, 0.11) 100%);
  color: #ffffff;
  top: 50%;
  margin-top: -30px;

  &:hover {
    opacity: 0.8;
  }
}

.skip {
  @apply absolute;
  background: rgba(117, 153, 191, 0.5);
  border-radius: 10px;
  padding: 5px 17px;
  color: #ffffff;

  /* background: ; */
  &:hover {
    opacity: 0.5;
  }
}
</style>

<style lang="scss">
.my-bullet {
  width: 7px;
  height: 4px;
  background: #8FB1C8;
  border-radius: 2px;
  margin: 0 10px;
}

.my-bullet-active {
  width: 18px;
  height: 4px;
  background: #4CBEFF;
  border-radius: 2px;
}
</style>